import Taro, {Component} from '@tarojs/taro'
import {View, Image, Text} from '@tarojs/components'
import './bottom.scss'
import {getAllFoodInfo,getEvent} from '../../utils/common';
let myEvent = getEvent();

export default class Bottom extends Component {
    constructor() {
        super(...arguments);
        this.state = {
            num: 0,
            sendPrice: 3,
            supportTakeBySelf: true,
            sendMustPrice:20,
            allPrice:0
        }
    }

    componentDidMount(){
        //获取整体的存储好的数据 或者  获取计算好的(公共类）
        let {allPrice,allNum} = getAllFoodInfo();
        this.setState({
            num:allNum,
            allPrice:allPrice
        });
        myEvent.on('addCut',()=>{
            let {allPrice,allNum} = getAllFoodInfo();
            this.setState({
                num:allNum,
                allPrice:allPrice
            })
        })
    }

    render() {
        let {num, sendPrice,supportTakeBySelf,sendMustPrice,allPrice} = this.state;
        return (
            <View className='bottom'>
                <View className='bottom-wrap'>
                    {num ? <Text className='num'>{num}</Text> : null}
                    <Image src={num ?require('../../assets/img/cart-active.png') : require('../../assets/img/cart.png')} className='bottom-wrap-icon'></Image>
                    <View className='send'>
                        {allPrice ? <Text className='allPrice'>{'￥'+allPrice}</Text> : <Text>{sendPrice ? '另需配送费￥'+sendPrice: null}</Text>}
                        {supportTakeBySelf ? <Text> | 支持自取</Text> : <Text> | 不支持自取</Text>}
                    </View>
                    {allPrice >= sendMustPrice ? <View className='goPay'>去结算</View> : <View className='price'>{sendMustPrice ? '￥'+sendMustPrice+'起送' : null}</View>}
                </View>
            </View>
        )
    }
}
